
<!DOCTYPE html>
<html>

<head>
   <meta http-equiv='X-UA-Compatible' content='IE=edge'>
   <meta charset='UTF-8'>
   <meta name='robots' content='index, follow'>   <meta name='author' content='Karl Maloszek - Simple Software Berlin (www.maloszek.de)'>
   <meta name='keywords' lang='en' content='Panorado, Simple Software, Karl Maloszek, Berlin, Viewer, Browser, Windows, Applet, Java, HTML5, Canvas, JavaScript, Application, Program, Web, Internet, Panorama, 360, 3D, 3-D, Photo, Photography, Image, Zoom, JPG, JPEG, Quicktime, RAW, HDR, GPS, Google Earth, GeoCoding, Camera, Metadata, Slide Show, EXIF, IPTC, Calendar, Tablet, Smartphone, Mobile, Download, Freeware, Shareware'>
   <meta name='keywords' lang='de' content='Panorado, Simple Software, Karl Maloszek, Berlin, Viewer, Browser, Windows, Applet, Java, HTML5, Canvas, JavaScript, Programm, Web, Internet, Panorama, 360, 3D, 3-D, Photo, Foto, Fotografie, Bild, Zoom, JPG, JPEG, Quicktime, RAW, HDR, GPS, Google Earth, GeoCoding, Kamera, Metadaten, Diashow, EXIF, IPTC, Kalender, Tablet, Smartphone, Download, Freeware, Shareware'>
   <meta name="description" lang="en" content="Panorado JS 2.0 - Technical Reference">
   <link rel="stylesheet" href="../css/pages.css" type="text/css">
   <script src="../js/functions.js" type="text/javascript"></script>
   <base target="_self">
   <title>Panorado JS 2.0 - Technical Reference</title>
</head>

<body>
<div class="main">
<!-- Begin Header -->

<div class="hdr">
   <div style="position:relative;left:0;top:0;width:857px;overflow:hidden">
      <img src="../img/Header.png" alt="">
   </div>

   <div style="position:absolute;left:0;top:0">
      <a href="Home.php" style="padding:0"><img src="../img/Null.gif" alt="" title="Home Page" style="width:320px;height:110px;border:none"></a>
   </div>

   <div style="position:absolute;left:360px;top:24px;width:480px">
      <p class="slogan">The immersive experience!</p>
   </div>

   <div style="position:absolute;left:328px;top:58px">
      <a href='Home.php' style='background:url(../img/NavBullet1.gif) no-repeat 0 3px'>Home</a><br>
&nbsp;&nbsp;&nbsp;<a href='News.php' style='background:url(../img/NavBullet1.gif) no-repeat 0 3px'>News</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='Bg_PanoramaViewers.php' style='background:url(../img/NavBullet1.gif) no-repeat 0 3px'>Backgrounders</a><br>
   </div>

   <div style="position:absolute;left:458px;top:58px">
      <a href='Panorado.php' style='background:url(../img/NavBullet1.gif) no-repeat 0 3px'>Panorado 4.0</a><br>
&nbsp;&nbsp;&nbsp;<a href='PanoradoJs.php' style='background:url(../img/NavBullet1.gif) no-repeat 0 3px'>Panorado JS 2.0</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='PanoradoFlyer.php' style='background:url(../img/NavBullet1.gif) no-repeat 0 3px'>Panorado Flyer 1.2</a><br>
   </div>

   <div style="position:absolute;left:618px;top:58px">
      <a href='PanoramaGallery.php' style='background:url(../img/NavBullet1.gif) no-repeat 0 3px'>Gallery</a><br>
&nbsp;&nbsp;&nbsp;<a href='Links.php' style='background:url(../img/NavBullet1.gif) no-repeat 0 3px'>Links</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='Contact.php' style='background:url(../img/NavBullet1.gif) no-repeat 0 3px'>Contact/Impressum</a><br>
   </div>

   <div style="position:absolute;left:780px;top:64px;text-align:right">
      <a href="../en/PanoradoJs_Tech.php"> <img src="../img/English.gif" alt="" title="English"></a>
      &nbsp;&nbsp;&nbsp;<br>
      <a href="../de/PanoradoJs_Tech.php"> <img src="../img/German.gif" alt="" title="Deutsch"></a><br>
   </div>

</div>

<!-- End Header -->



<div class="page">



<div class="pagehdr">
<table class="content">
   <tr>
      <td style="width:450px">
      <h1>Panorado JS 2.0</h1>
      <p class="subtitle">- Technical Reference</p>
      <p>&nbsp;</p>
      <ul>
         <li class="submenu"><a href="#FR">Framework</a></li>
         <li class="submenu"><a href="#RE">Recommendations</a></li>
         <li class="submenu"><a href="#PA">PanoradoJS class</a></li>
         <li class="submenu"><a href="#PA_PR">PanoradoJS properties</a></li>
         <li class="submenu"><a href="#PA_ME">PanoradoJS methods</a></li>
         <li class="submenu"><a href="#PA_EV">PanoradoJS events</a></li>
         <li class="submenu"><a href="#PA_IM">PanoradoJS.image</a></li>
         <li class="submenu"><a href="#PA_IM_HS">PanoradoJS.image.hotspots</a></li>
         <li class="submenu"><a href="#PA_CO">PanoradoJS.controls</a></li>
         <li class="submenu"><a href="#IN">Mouse and keyboard interaction</a></li>
         <li class="submenu"><a href="#SA">Sample Page</a><br></li>
      </ul>
      </td>
      <td style="text-align:right;vertical-align:middle"><img src="../img/PanoradoJs_Tech_Page.gif" alt=""></td>
   </tr>
</table>
</div>

<div class="hr">
   <a href="Bg_Html5.php">Background: HTML5</a>
   <a href="BrowserCompatibility.php" target="_blank">Browser Compatibility</a>
   <a href="PanoradoJs.php"> Panorado JS Overview</a>
</div>


<table class="content">
   <tr>
      <td class="left">
      <h3 id="FR">Framework</h3>
      <p class="totop"><a href="#top"><img src="../img/ToTop.gif" alt=""></a></p>
      </td>
      <td class="right">
      <p>A panorama viewer appears at least 3 times within an HTML5 page:</p>

      <ul>
         <li class="sub">There's a <code>&lt;canvas&gt;</code> element as a placehoder for the viewer within the <code>&lt;body&gt;</code> element.
         This element is ignored by older browsers which, instead, render the objects included.</li>

         <li class="sub">The real viewer code is inside a JavaScript class.
         A <code>&lt;script&gt;</code> element within the <code>&lt;head&gt;</code> element references
         the file containing this class (Panorado_min.js).</li>

         <li class="sub">Loading the page should trigger the creation and initialization of the viewer object.
         This can be done within an event handler function for the <code>window.onload</code> event.</li>
      </ul>
      <p>Thus, a very simple page looks like this:</p>
      <div class="code" id="simpleCode"><pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
   &lt;head&gt;
      &lt;title&gt;Panorado JS Demo&lt;/title&gt;
      &lt;script src="Panorado_min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
         window.onload = function() {
            Viewer = new PanoradoJS(document.getElementById("ViewerCanvas"));
            Viewer.image = { src: 'PanoradoDemo.jpg', projection: 'spherical' };
         }
      &lt;/script&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;canvas id="ViewerCanvas" style="width:800px;height:450px"&gt;
         Please update your browser for HTML5 support!
      &lt;/canvas&gt;
   &lt;/body&gt;
&lt;/html&gt;
</code></pre></div>
      </td>
   </tr>

   <tr>
      <td class="left">
      <h3 id="RE">Recommendations</h3>
      <p class="totop"><a href="#top"><img src="../img/ToTop.gif" alt=""></a></p>
      </td>
      <td class="right">

      <ul>
         <li class="sub">Place a short advisory notice close to the applet explaining how to use the mouse for
         interactive control!</li>

         <li class="sub">For <b>panoramic images</b>, try these initial settings:<br>
         The <code>Viewer.image</code> object should have the <code>projection: "spherical"</code> property.<br>
         Width of the source image: For a 360° image about the applet width * 3, or less if the
         horizontal angle is smaller.</li>

         <li class="sub">For <b>images with a small field of view</b>, we recommend flat projection (which is the default).<br>
         Start with a reduced size, fitting the image into the applet frame:
         <code>Viewer.image.scale = 0</code>.<br>
         Encourage the visitor to zoom into the image.</li>

         <li class="sub">Please notice that <b>large images</b> may need some time to be downloaded over the Internet,
         and require much more system memory than the file size might suggest.</li>
      </ul>
      </td>
   </tr>

   <tr>
      <td class="left">
      <h3 id="AP">PanoradoJS class</h3>
      <p class="totop"><a href="#top"><img src="../img/ToTop.gif" alt=""></a></p>
      </td>
      <td class="right">
      <p>Technically, the Panorado JS Viewer is a JavaScript class like any other, with properties, methods, and events.</p>

      <p>A freshly created viewer object needs to know 2 things to start working:</p>
      <ul>
      <li class="sub">What is to be painted? The image file is defined by the <code>image</code> property.</li>
      <li class="sub">Where will it be painted? A <code>canvas</code> object needs to be assigned.</li>
      </ul>

      <p>Besides these 2 properties, there are lots more which will be described in detail below.</p>

      </td>
   </tr>

   <tr>
      <td class="left">
      <h3 id="PA_PR">PanoradoJS properties</h3>
      <p class="totop"><a href="#top"><img src="../img/ToTop.gif" alt=""></a></p>
      </td>
      <td class="right">
      <p>A Panorado JS viewer object supports these properties<br>(all angles in degrees):</p>

      <table class="code">
         <tr>
            <td class="left2"><code>version</code></td>
            <td>[get; String] The script's version number.</td>
         </tr>
         <tr>
            <td class="left2"><code>canvas</code></td>
            <td>[get; Object] the canvas object within the HTML page where the image is to be "painted".</td>
         </tr>
         <tr>
            <td class="left2"><code>image</code></td>
            <td>[set, get; Object] The source image to be rendered.<br>
            Besides the properties of a standard HTML Image object like
            <code>src</code>, <code>width</code> and <code>height</code>,
            this object has some more specific properties <a href="#PA_IM">(description)</a>.</td>
         </tr>
         <tr>
            <td class="left2"><code>imageList</code></td>
            <td>[set, get; Array] An optional list of image definitions.<br>
            If such a list is defined, the viewer can switch between the list's images using its
            <code>selectImage()</code> and <code>nextImage()</code> methods.</td>
         </tr>
         <tr>
            <td class="left2"><code>projection</code></td>
            <td>[set, get; String] The current projection mode: "flat" or "spherical". Default: "flat".<br>
            Every image can be provided with its own initial projection mode.</td>
         </tr>
         <tr>
            <td class="left2"><code>gridSize</code></td>
            <td>[set, get; Num] The nominal size of the grid used for spherical projection.
            A smaller grid provides better image quality but slower performance. Value: 1...8°, default: 5°.</td>
         </tr>
         <tr>
            <td class="left2"><code>enabled</code></td>
            <td>[set, get; Boolean] Defines if mouse/keyboard/touch interaction shall possible. Default: true</td>
         </tr>
         <tr>
            <td class="left2"><code>fullWindowEnabled</code></td>
            <td>[set, get; Boolean] Defines if enlarging the viewer to full windows size interactively shall be possible. Default: true</td>
         </tr>
         <tr>
            <td class="left2"><code>mouseMode</code></td>
            <td>[set, get; String] Defines if dragging the mouse will move the viewport ("pan") or the image ("grab"). Default: "pan".</td>
         </tr>
         <tr>
            <td class="left2"><code>mouseWheel</code></td>
            <td>[set, get; String] Defines the zoom direction when rotating the mouse wheel up.<br>
            "in" or "out"; default: "in".</td>
         </tr>
         <tr>
            <td class="left2"><code>isWebGlAvailable</code></td>
            <td>[get; Boolean] Returns if WebGL hardware graphics support is available.</td>
         </tr>
         <tr>
            <td class="left2"><code>useWebGl</code></td>
            <td>[set, get; Boolean] Defines if WebGL hardware graphics support shall be used.<br>
            Default: true if available</td>
         </tr>
         <tr>
            <td class="left2"><code>isTouchAvailable</code></td>
            <td>[get; Boolean] Returns if touchscreen input is available.</td>
         </tr>
         <tr>
            <td class="left2"><code>useTouch</code></td>
            <td>[set, get; Boolean] Defines if touchscreen input shall be used to navigate the viewer - instead of mouse input.<br>
            Default: true if available.</td>
         </tr>
         <tr>
            <td class="left2"><code>isOrientationAvailable</code></td>
            <td>[get; Boolean] Returns if device orientation and tilt are available.<br>
            Some browsers claim to support orientation without checking for device capabilities.
            Some browsers don't recognize portrait/landscape orientation correctly.
            That's why navigating the Panorado viewer by device orientation should currently be regarded as an experimental feature.</td>
         </tr>
         <tr>
            <td class="left2"><code>orientationMode</code></td>
            <td>[set, get; Boolean] Defines how device orientation and tilt shall be used to navigate the viewer. Options:<br>
            &quot;none&quot; = Ignore<br>
            &quot;absolute&quot; = Position image according to device cardinal direction (compass) and tilt<br>
            &quot;relative&quot; = Move image according to device pan and tilt (ignoring compass direction)<br>
            Default: &quot;none&quot;.</td>
         </tr>
         <tr>
            <td class="left2"><code>panCursor0</code></td>
            <td>[set, get; String] Defines the name of a .cur file used for the mouse cursor symbol
            in pan mode with the left mouse button released. Optional.</td>
         </tr>
         <tr>
            <td class="left2"><code>panCursor1</code></td>
            <td>[set, get; String] Defines the name of a .cur file used for the mouse cursor symbol
            in pan mode with the left mouse button pressed. Optional.</td>
         </tr>
         <tr>
            <td class="left2"><code>grabCursor0</code></td>
            <td>[set, get; String] Defines the name of a .cur file used for the mouse cursor symbol
            in grab mode with the left mouse button released. Optional.</td>
         </tr>
         <tr>
            <td class="left2"><code>grabCursor1</code></td>
            <td>[set, get; String] Defines the name of a .cur file used for the mouse cursor symbol
            in grab mode with the left mouse button pressed. Optional.</td>
         </tr>
         <tr>
            <td class="left2"><code>softPan</code></td>
            <td>[set, get; Num] Defines the duration of the SoftPan effect.<br>
            SoftPan the delayed movement after the mouse button has been released.<br>
            Value: 0...5; default: 2.</td>
         </tr>
         <tr>
            <td class="left2"><code>softZoom</code></td>
            <td>[set, get; Num] Defines the duration of the SoftZoom effect.<br>
            SoftZoom is a smooth transition effect applied when zooming in or out.<br>
            Value: 0...5; default: 3.</td>
         </tr>
         <tr>
            <td class="left2"><code>softFade</code></td>
            <td>[set, get; Num] Defines the duration of the SoftFade effect.<br>
            SoftFade is a transition effect applied when switching between images.<br>
            Value: 0...10; default: 0.5.</td>
         </tr>
         <tr>
            <td class="left2"><code>loaded</code></td>
            <td>[get; Boolean] Defines if currently an image is loaded completely, ready for viewing.</td>
         </tr>
         <tr>
            <td class="left2"><code>pan</code></td>
            <td>[set, get; Num] Defines the current horizontal viewing angle.<br>
            Every image can be provided with its own initial viewing angle.<br>
            Value: 0°...360°.</td>
         </tr>
         <tr>
            <td class="left2"><code>tilt</code></td>
            <td>[set, get; Num] Defines the current vertical viewing angle.<br>
            Every image can be provided with its own initial viewing angle.<br>
            Value: -90°...+90°.</td>
         </tr>
         <tr>
            <td class="left2"><code>scale</code></td>
            <td>[set, get; Num] Defines the current viewing scale.<br>
            A value of 1 corresponds to 100%.<br>
            Every image can be provided with its own initial scale.<br>
            Value: 0.25...8.</td>
         </tr>
         <tr>
            <td class="left2"><code>panSpeed</code></td>
            <td>[set, get; Num] Defines the current horizontal panning speed (degrees per second).<br>
            Every image can be provided with its own initial panning speed.<br>
            Value: 0...60.</td>
         </tr>
         <tr>
            <td class="left2"><code>tiltSpeed</code></td>
            <td>[set, get; Num] Defines the current vertical panning speed (degrees per second).<br>
            Every image can be provided with its own initial panning speed.<br>
            Value: 0...60.</td>
         </tr>
         <tr>
            <td class="left2"><code>mousePan</code></td>
            <td>[get; Num] Defines the horizontal viewing angle of the current mouse cursor position.</td>
         </tr>
         <tr>
            <td class="left2"><code>mouseTilt</code></td>
            <td>[get; Num] Defines the vertical viewing angle of the current mouse cursor position.</td>
         </tr>
         <tr>
            <td class="left2"><code>hotspotsVisible</code></td>
            <td>[set, get; Num] Defines if hotspots should be currently visible.<br>
            Default: true.</td>
         </tr>
         <tr>
            <td class="left2"><code>hotspotInfo</code></td>
            <td>[set, get; String] Defines the URL of an image file to be used for the symbol of an info hotspot.<br>
            This global definition can be overidden for every single hotspot <a href="#PA_IM_HS">(description)</a><br>
            Default: internal symbol.</td>
         </tr>
         <tr>
            <td class="left2"><code>hotspotLink</code></td>
            <td>[set, get; String] Defines the URL of an image file to be used for the symbol of an link hotspot.<br>
            This global definition can be overidden for every single hotspot <a href="#PA_IM_HS">(description)</a><br>
            Default: internal symbol.</td>
         </tr>
         <tr>
            <td class="left2"><code>compassVisible</code></td>
            <td>[set, get; Boolean] Defines if the compass scale should currently be visible.<br>
            Loading an image with a compassNorth property turns this switch on.<br>
            Default: false.</td>
         </tr>
         <tr>
            <td class="left2"><code>fullWindow</code></td>
            <td>[set, get; Boolean] Defines if the viewer is to fill the entire area of the document window.<br>
            Default: false.</td>
         </tr>

      </table>

      </td>
   </tr>

   <tr>
      <td class="left">
      <h3 id="PA_ME">PanoradoJS methods</h3>
      <p class="totop"><a href="#top"><img src="../img/ToTop.gif" alt=""></a></p>
      </td>
      <td class="right">
      <p>The Panorado JS viewer object supports these methods<br>(all angles in degrees):</p>

      <table class="code">
         <tr>
            <td class="left2"><code>new PanoradoJS(canvas)</code></td>
            <td>Constructor. Requires existing canvas element as parameter.</td>
         </tr>

         <tr>
            <td class="left2"><code>reset()</code></td>
            <td>Restarts the current image with its initial viewing angle, scale, and speed.</td>
         </tr>

         <tr>
            <td class="left2"><code>move(panOff, tiltOff)</code></td>
            <td>Shifts the image's viewing angle by the offset values specified (angles).</td>
         </tr>
         <tr>
            <td class="left2"><code>setSpeed(panSpeed, tiltSpeed)</code></td>
            <td>Sets the current speed to the angle values specified.<br>
            <code>null</code> parameter values will be ignored.</td>
         </tr>
         <tr>
            <td class="left2"><code>zoom(factor)</code></td>
            <td>Changes the current scale by the factor specified,
            preserving the viewing angle of the center of the viewport.</td>
         </tr>
         <tr>
            <td class="left2"><code>zoomToCursor(factor)</code></td>
            <td>Changes the current scale by the factor specified,
            preserving the viewing angle under the mouse cursor.</td>
         </tr>
         <tr>
            <td class="left2"><code>moveTo(pan, tilt, scale)</code></td>
            <td>Sets the current viewing angle<br>
            Sets alos the current scale if the third parameter is unequal <code>null</code>.</td>
         </tr>
         <tr>
            <td class="left2"><code>resize(width, height)</code></td>
            <td>Changes the canvas element's size to the values specified.</td>
         </tr>
         <tr>
            <td class="left2"><code>selectImage(index)</code></td>
            <td>If the <code>imageList</code> property has been set,
            this will switch to the list's image with the index specified.</td>
         </tr>
         <tr>
            <td class="left2"><code>nextImage(offset)</code></td>
            <td>If the <code>imageList</code> property has been set,
            this will switch to the list's image with the offset specified (previous/next).</td>
         </tr>

      </table>

      </td>
   </tr>

   <tr>
      <td class="left">
      <h3 id="PA_EV">PanoradoJS events</h3>
      <p class="totop"><a href="#top"><img src="../img/ToTop.gif" alt=""></a></p>
      </td>
      <td class="right">
      <p>A Panorado JS viewer object supports these events which you can assign approprate handler functions:</p>

      <table class="code">
         <tr>
            <td class="left2"><code>onClick</code></td>
            <td>[set, get] Function to be called when the left mouse button is clicked
            while the mouse cursor is within the viewer's area.</td>
         </tr>
         <tr>
            <td class="left2"><code>onDblClick</code></td>
            <td>[set, get] Function to be called when the left mouse button is double-clicked
            while the mouse cursor is within the viewer's area.</td>
         </tr>
         <tr>
            <td class="left2"><code>onImageLoaded</code></td>
            <td>[set, get] Function to be called after an image has been loaded completely.</td>
         </tr>
         <tr>
            <td class="left2"><code>onImageMove</code></td>
            <td>[set, get] Function to be called when changing the viewing angle or the scale.</td>
         </tr>
         <tr>
            <td class="left2"><code>onMouseMove</code></td>
            <td>[set, get] Function to be called when moving the mouse within the viewer's area.</td>
         </tr>
      </table>

      </td>
   </tr>

   <tr>
      <td class="left">
      <h3 id="PA_IM">PanoradoJS.image</h3>
      <p class="totop"><a href="#top"><img src="../img/ToTop.gif" alt=""></a></p>
      </td>
      <td class="right">
      <p>If you assign an image assigned to the viewer,
      you have to provide a more or less complex JSON object containing image properties.
      Example:</p>
      <p><code>Viewer.img = { src: "MyPano.jpg", projection: "spherical" };</code></p>
      <p>The properties set here can be read afterwards one by one:</p>

      <table class="code">
         <tr>
            <td class="left2"><code>src</code></td>
            <td>[get; String] The URL of the image file. Mandatory.</td>
         </tr>
         <tr>
            <td class="left2"><code>title</code></td>
            <td>[get; String] A plain text image description.</td>
         </tr>
         <tr>
            <td class="left2"><code>projection</code></td>
            <td>[get; String] The initial projection mode: "flat" oder "spherical"; Default: "flat".<br>
            The current setting can be changed afterwards by means of the <code>Viewer.projection</code> property.</td>
         </tr>
         <tr>
            <td class="left2"><code>horizon</code></td>
            <td>[get; Num] The distance between the horizon and the source image's vertical center line, in degrees. Default: 0°.</td>
         </tr>
         <tr>
            <td class="left2"><code>pan</code></td>
            <td>[get; Num] The initial horizontal viewing angle. Default: 0°.</td>
         </tr>
         <tr>
            <td class="left2"><code>tilt</code></td>
            <td>[get; Num] The initial vertical viewing angle. Default: 0°.</td>
         </tr>
         <tr>
            <td class="left2"><code>scale</code></td>
            <td>[get; Num] The initial viewing scale. Default: 0 (fit).</td>
         </tr>
         <tr>
            <td class="left2"><code>horzFov</code></td>
            <td>[get; Num] The horizontal field of view of the source image. Default: 360°.</td>
         </tr>
         <tr>
            <td class="left2"><code>panSpeed</code></td>
            <td>[get; Num] The initial horizontal viewing speed (degrees per second).<br>
            Value: 0...60; default: 3.</td>
         </tr>
         <tr>
            <td class="left2"><code>tiltSpeed</code></td>
            <td>[get; Num] The initial vertical viewing speed (degrees per second).<br>
            Wert: 0...60; default: 0.</td>
         </tr>
         <tr>
            <td class="left2"><code>compassNorth</code></td>
            <td>[get; Num] The distance (degrees) between the left image margin and the direction considered as pointing north.<br>
            Value: 0...360; default: null (don't show a compass scale).</td>
         </tr>
         <tr>
            <td class="left2"><code>hotspots</code></td>
            <td>[get; Array] An optional list of hotspot definitions <a href="#PA_IM_HS">(description)</a></td>
         </tr>
      </table>


      <p>More image properties that dont't have to be set explicitly:</p>

     <table class="code">
         <tr>
            <td class="left2"><code>vertFov</code></td>
            <td style="width:500px">[get; Num] The vertical field of view of the source image (degrees).<br>
            Calculated from the horzFov, width, and height properties.</td>
         </tr>
         <tr>
            <td class="left2"><code>is360</code></td>
            <td>[get; Boolean] Indicates if the horizontal field of view is 360°.</td>
         </tr>
         <tr>
            <td class="left2"><code>width</code></td>
            <td>[get; Num] The image width (pixels).</td>
         </tr>
         <tr>
            <td class="left2"><code>height</code></td>
            <td>[get; Num] The image height (pixels).</td>
         </tr>
      </table>

      </td>
   </tr>

   <tr>
      <td class="left">
      <h3 id="PA_IM_HS">PanoradoJS. image.hotspots</h3>
      <p class="totop"><a href="#top"><img src="../img/ToTop.gif" alt=""></a></p>
      </td>
      <td class="right">

      <p>An image description can contain an optional array of hotspot definitions in JSON format. Example:</p>
      <p><code>{ pan: 120, tilt:10, text: "Show detailed description", url: "Description.htm", target: "_blank" };</code></p>
      <p>When reading <code>Viewer.img.hotspots[index]</code>, you can retrieve hotspot definitions.<br>
      The hotspot object supports these properties:</p>

     <table class="code">
         <tr>
            <td class="left2"><code>pan</code></td>
            <td>[get; Num] The horizontal viewing angle. Mandatory.</td>
         </tr>
         <tr>
            <td class="left2"><code>tilt</code></td>
            <td>[get; Num] The vertical viewing angle. Mandatory.</td>
         </tr>
         <tr>
            <td class="left2"><code>text</code></td>
            <td>[get; String] A descriptive text to be displayed when hovering the hotspot with the mouse.</td>
         </tr>
         <tr>
            <td class="left2"><code>url</code></td>
            <td>[get; String] If not set, this a merely informative hotspot.<br>
            If set, this is the URL (link) of a page to be displayed when the hotspot is clicked.<br>
            Instead of a URL, you could assign a JavaScript funcion call like<br>
            <code>"javascript:doSomething();"</code></td>
         </tr>
         <tr>
            <td class="left2"><code>target</code></td>
            <td>[get; String] The name of the window where the linked target is to be displayed. Default: "_self".<br>
            You can specify "_blank" for a popup window, or any other name at your choice.</td>
         </tr>
         <tr>
            <td class="left2"><code>img</code></td>
            <td>[get; String] The URL of an image file to be used for the hotspot's symbol. Optional.</td>
         </tr>
      </table>

      </td>
   </tr>


   <tr>
      <td class="left">
      <h3 id="PA_CO">PanoradoJS.controls</h3>
      <p class="totop"><a href="#top"><img src="../img/ToTop.gif" alt=""></a></p>
      </td>
      <td class="right">

      <p>The <code>Viewer.controls</code> object allows to define the appearance of
      the control buttons which can be provided within the viewer's display area.<br>
      The controls object supports these properties:</p>

     <table class="code">
         <tr>
            <td class="left2"><code>visible</code></td>
            <td>[set, get; Boolean] Defines if internal controls are to be used at all. Default: true.</td>
         </tr>
         <tr>
            <td class="left2"><code>reset</code></td>
            <td>[set, get; Boolean] Defines if an internal reset button is to be displayed. Default: true.</td>
         </tr>
         <tr>
            <td class="left2"><code>motion</code></td>
            <td>[set, get; Boolean] Defines if internal buttons for moving the image are to be displayed. Default: true.</td>
         </tr>
         <tr>
            <td class="left2"><code>browse</code></td>
            <td>[set, get; Boolean] Defines if internal buttons for switching between images are to be displayed. Default: true.<br>
            This assumes that an <code>Viewer.imageList</code> object has been defined.</td>
         </tr>
         <tr>
            <td class="left2"><code>hotspots</code></td>
            <td>[set, get; Boolean] Defines if an internal button for showing/hiding hotspots is to be displayed. Default: true.</td>
         </tr>
         <tr>
            <td class="left2"><code>fullWindow</code></td>
            <td>[set, get; Boolean] Defines if an internal button for resizing the viewer to full window size is to be displayed. Optional.</td>
         </tr>
         <tr>
            <td class="left2"><code>helpUrl</code></td>
            <td>[set, get; String] Defines a URL for an optional popup page containing helpful instructions.</td>
         </tr>
         <tr>
            <td class="left2"><code>closeWindow</code></td>
            <td>[set, get; Boolean] Defines if an internal button for closing the viewer window is to be displayed. Default: true.<br>
            The button is only shown if the viewer is within a popup window.</td>
         </tr>
         <tr>
            <td class="left2"><code>size</code></td>
            <td>[set, get; Boolean] Defines an indicator for the size of the internal buttons.<br>
            Value: 0.7...2; default: 1.</td>
         </tr>
      </table>

      <p>Notice: All the above underlying functions (and many more) can also be implemented using external HTML elements!</p>

      </td>
   </tr>

   <tr>
      <td class="left">
      <h3 id="IN">Mouse and keyboard interaction</h3>
      <p class="totop"><a href="#top"><img src="../img/ToTop.gif" alt=""></a></p>
      </td>
      <td class="right">
      <p>Clicking on the applet moves the input focus to it. This allows you to control the viewer...</p>

      <p><b>...using the mouse:</b></p>

      <table class="code">
         <tr>
            <td class="left2"><b>Click &amp; drag<br>left mouse key</b></td>
            <td>Pans the image.</td>
         </tr>
         <tr>
            <td class="left2"><b>Rotate mouse wheel</b></td>
            <td>Zooms in/out (using smaller steps if shift key is pressed).</td>
         </tr>
      </table>

      <p><b>...using the keyboard:</b></p>

      <table class="code">
         <tr>
            <td class="left2"><b>M</b></td>
            <td>Toggles between mouse modes.</td>
         </tr>
         <tr>
            <td class="left2"><b>1</b></td>
            <td>Sets the scale to 100%.</td>
         </tr>
         <tr>
            <td class="left2"><b>2</b></td>
            <td>Sets the scale to 200%.</td>
         </tr>
         <tr>
            <td class="left2"><b>5</b></td>
            <td>Sets the scale to 50%.</td>
         </tr>
         <tr>
            <td class="left2"><b>A</b></td>
            <td>Shows as much of the image as possible.</td>
         </tr>
         <tr>
            <td class="left2"><b>+/-</b></td>
            <td>Zooms (in/out).</td>
         </tr>

         <tr>
            <td class="left2"><b>+/-</b></td>
            <td>Zooms in/out (using smaller steps if shift key is pressed).</td>
         </tr>
         <tr>
            <td class="left2"><b>Cursor keys</b></td>
            <td>Pans the image.</td>
         </tr>
         <tr>
            <td class="left2"><b>Shift+Cursor keys</b></td>
            <td>Moves the image evenly.</td>
         </tr>
         <tr>
            <td class="left2"><b>Enter</b></td>
            <td>Enlarges viewer to full window size.</td>
         </tr>
         <tr>
            <td class="left2"><b>Escape</b></td>
            <td>Stops moving the image or resizes viewer from full window to normal.</td>
         </tr>
         <tr>
            <td class="left2"><b>C</b></td>
            <td>Toggles visibility of the compass scale.</td>
         </tr>
         <tr>
            <td class="left2"><b>H</b></td>
            <td>Toggles visibility of hotspots.</td>
         </tr>
         <tr>
            <td class="left2"><b>I</b></td>
            <td>Displays information about the viewer.</td>
         </tr>
      </table>

      </td>
   </tr>

   <tr>
      <td class="left">
      <h3 id="SA">Sample Page</h3>
      <p class="totop"><a href="#top"><img src="../img/ToTop.gif" alt=""></a></p>
      </td>
      <td class="right">

      <p>An HTML page with some more explicit settings might look like this:</p>
      <div class="code" id="simpleCode"><pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
   &lt;head&gt;
      &lt;title&gt;Panorado JS Demo #2&lt;/title&gt;
      &lt;script src="Panorado_min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
         var imgList = [
             { src: 'Panorama1.jpg', title: 'Panorama #1', projection: 'spherical',
               pan: 90, scale: 1, horzFov: 180, horizon: 3,
               hotspots: [
                  { pan: 6, tilt: 0, text: "More about this spot...", url: "More.htm", target: "_blank" },
                  { pan: 88.3, tilt: 5, text: "This is something to notice", img: "HsInfo.png" }
               ]
             },
             { src: 'Panorama2.jpg', title: 'Panorama #2', horzFov: 360, projection: 'spherical' },
             { src: 'FlatImage1.jpg', title: 'Flat Image #1', horzFov: 20, projection: 'flat' }
          ];

         window.onload = function() {
            Viewer = new PanoradoJS(document.getElementById("ViewerCanvas"));
            Viewer.imageList = imgList;
            Viewer.selectImage(0);
            Viewer.onImageLoaded =
               function() { document.getElementById('imageTitle').innerHTML = Viewer.image.title; };
            Viewer.onDblClick =
               function() { Viewer.zoomToCursor(2); };
            document.getElementById("version").innerHTML = Viewer.version;
         };
      &lt;/script&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;h1&gt;Panorado JS v.&lt;span id="version"&gt;???&lt;/span&gt; Demo #2&lt;/h1&gt;
      &lt;p id="imageTitle"&gt;Loading image...&lt;/p&gt;
      &lt;canvas id="ViewerCanvas" style="width:800px;height:450px"&gt;
         Please update your browser for HTML5 support!
      &lt;/canvas&gt;
   &lt;/body&gt;
&lt;/html&gt;
</code></pre></div>

      </td>
   </tr>
</table>


</div>
</div>
</body>
</html>

